<template>
	<view class="box">
		
		<u-grid :border="false" col="2" :customStyle="{width:'100%'}">
			<u-grid-item :customStyle="{width: '50%'}" class="grid-item" v-for="(item, index) in list" :key="index">
				<view class="col" @click.stop="navTo('/pages/market/collection',{id: item.id})">
					<view class="cover">
						<u--image radius="5" width="100%" height="350rpx" mode="aspectFill" :src="item.cover"></u--image>
						<view class="like" @click.stop="onClickLike(item,index)"><u-icon class="icon" size="16" :color="item.isLike ? '#bf8fef' : '#fff'" :name="item.isLike ? 'heart-fill' : 'heart'"></u-icon>{{$util.bigNumberTransform(item.likeCount)}}</view>
					</view>
					<view class="name textHide">{{item.name}}</view>
					<view class="artist textHide">艺术家: {{item.artistName}}</view>
					<view class="price">
						<text class="l">价格:</text>
						<text class="r">￥{{item.price}}</text>
					</view>
				</view>
			</u-grid-item>
		</u-grid>
		<u-empty v-if="list.length == 0" mode="data" marginTop="60" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
	</view>
</template>

<script>
	import {mapActions} from 'vuex';
	export default {
		components: {
		},
		props: {
			list: {
			  type: Array,
			  default: []
			}
		},
		data() {
			return {
			}
		},
		methods: {
			...mapActions("follow", ["cancelLike","like"]),
			onClickLike(item,index){
				if(this.list[index].loading) return;
				if(item.isLike){
					this.list[index].loading = true
					this.cancelLike({id: item.galleryId}).then(res => {
						item.isLike = !item.isLike;
						item.likeCount -= 1;
					}).finally(()=>{
						this.list[index].loading =false;
					})
				} else {
					this.list[index].loading = true
					this.like({id: item.galleryId}).then(res => {
						item.isLike = !item.isLike;
						item.likeCount += 1;
					}).finally(()=>{
						this.list[index].loading =false;
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box{
		padding: 10rpx 0rpx;
		.u-grid-item--hover-class{
			opacity: 1;
		}
		.col{
			background-color: #484b5e;
			border-radius: 10rpx;
			width: 96%;
			margin-bottom: 20rpx;
			.cover{
				position: relative;
				.like{
					display: flex;
					align-items: center;
					font-size: 24rpx;
					min-width: 80rpx;
					padding:4rpx 16rpx;
					background-color: rgba(0,0,0,0.5);
					border-radius: 6rpx;
					position: absolute;
					top: 10rpx;
					right: 10rpx;
					z-index: 9;
					.icon{
						margin-right: 4rpx;
					}
				}
			}
			.name{
				color: #ffffff;
				font-size: 26rpx;
				padding: 10rpx 10rpx;
				overflow: hidden;
			}
			.artist{
				color: #999999;
				font-size: 22rpx;
				padding: 0rpx 10rpx;
			}
			.price{
				display: flex;
				justify-content: space-between;
				font-size: 22rpx;
				padding: 20rpx 10rpx 30rpx 10rpx;
				.r{
					color: #fac22b;
				}
			}
		}
	}
</style>
